import React from 'react';
import { Table, Button, Container } from 'react-bootstrap';
import PaginationBar from './PaginationBar';

/**
 * @typedef {Object.<string, string>} TableColumns
 */

/**
 * @typedef {Object.<string, any>} TableRow
 */

/**
 * @typedef {Object} TableOperation
 * @property {string} columnName
 * @property {string} buttonName
 * @property {(TableRow) => {}} onClick
 * @property {string} variant
 */

/**
 * @typedef {Object} TablePagination
 * @property {number} totalPage
 * @property {number} currentPage
 * @property {(number) => {}} props.gotoPageCallback
 */

/**
 * @typedef {(columData: any) => any} TableColumnDisplayAdapter
 */

/**
 * @typedef {Object} TableData
 * @property {object[]} rows
 * @property {Object.<string, TableColumnDisplayAdapter>} adapters
 * @property {TableColumns} columns
 * @property {TableOperation[]} operations
 * @property {TablePagination} pagination
 */

/**
 * 
 * @param {Object} props
 * @param {TableData} props.data
 * @param {string?} props.className
 * @returns 
 */
const AdminBaseTable = ({ data, className }) => {
    let columnKeys = Object.keys(data.columns);
    data.adapters = data.adapters || {};
    Object.keys(data.columns).forEach(columnName => {
        if (!data.adapters[columnName])
            data.adapters[columnName] = (data) => data;
    });

    return (
        <Container className={className}>
            <Table striped bordered hover>
                <thead>
                    <tr>
                        { Object.values(data.columns).map((columnName, index) => (
                            <th key={index}>{columnName}</th>
                        )) }
                        { data.operations && <th>操作</th> }
                    </tr>
                </thead>
                <tbody>
                    {data.rows.map(row => (
                        <tr>
                            {
                                Object.keys(data.columns).map(columnName => (
                                    <td key={columnName}>{data.adapters[columnName](row[columnName])}</td>
                                ))
                            }
                            {
                                data.operations &&
                                    <td colSpan={columnKeys.length + 1}>
                                        {data.operations.map((operation, index) => (
                                            <Button
                                                key={index}
                                                variant={operation.variant}
                                                onClick={ () => operation.onClick(row) }
                                                className='me-2'
                                            >
                                                {operation.buttonName}
                                            </Button>
                                        ))}
                                    </td>
                            }
                        </tr>
                    ))
                    }

                </tbody>
            </Table>
            { data.pagination &&
                <PaginationBar
                    totalPages={data.pagination.totalPage}
                    currentPage={data.pagination.currentPage}
                    gotoPageCallback={data.pagination.gotoPageCallback}
                /> }
        </Container>
    );
};

export default AdminBaseTable;
